<script setup lang="ts">
import { ref, watch } from 'vue'
import LandBasicInfoForm from './components/1LandBasicInfoForm.vue'
import LandApplicationForm from './components/2LandApplicationForm.vue'
import LandQuotaForm from './components/3LandQuotaForm.vue'
import LandPreApprovalForm from './components/4LandPreApprovalForm.vue'
import LandRightCategoryForm from './components/5LandRightCategoryForm.vue'
import LandSpacePlanningForm from './components/6LandSpacePlanningForm.vue'
import FarmlandBalanceForm from './components/7FarmlandBalanceForm.vue'
import LandExpropriationForm from './components/8LandExpropriationForm.vue'
import LandUseForm from './components/9LandUseForm.vue'
import MineralDepositForm from './components/10MineralDepositForm.vue'
import DisasterAssessmentForm from './components/11DisasterAssessmentForm.vue'
import IllegalLandForm from './components/12IllegalLandForm.vue'
import ComplaintForm from './components/13ComplaintForm.vue'


// 全局用地类型选择 - 所有组件共享
const landType = ref<string>('batch') // 'single' 表示单独选址，'batch' 表示批次用地

// 监控landType变化，用于调试
watch(landType, (newValue) => {
  console.log('landType 变化为:', newValue)
})

// 控制移动端菜单显示/隐藏的状态变量
const isMobileMenuOpen = ref<boolean>(false)

// 切换移动端菜单显示状态
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}
// 定义可选的组件类型
interface ComponentOption {
  id: string
  name: string
  component: any
}

// 定义可用的组件选项
const componentOptions: ComponentOption[] = [
  {
    id: 'land-basic-info',
    name: '1基本情况',
    component: LandBasicInfoForm
  },
  {
    id: 'land-application',
    name: '2审核许可',
    component: LandApplicationForm
  },
  {
    id: 'land-quota',
    name: '3计划指标',
    component: LandQuotaForm
  },
  {
    id: 'land-pre-approval',
    name: '4土地预审',
    component: LandPreApprovalForm
  },
  { id: 'land-right-category', name: '5权属地类', component: LandRightCategoryForm },
  {
    id: 'land-space-planning',
    name: '6土地空间规划',
    component: LandSpacePlanningForm
  },
  {
      id: 'farmland-balance',
      name: '7耕地占补平衡及永久基本农田占用补划',
      component: FarmlandBalanceForm
    },
  {
      id: 'land-expropriation',
      name: '8土地征收',
      component: LandExpropriationForm
    },
  {
      id: 'land-use',
      name: '9土地利用',
      component: LandUseForm
    },
    {
      id: 'mineral-deposit',
      name: '10压矿情况',
      component: MineralDepositForm
    },
    {
      id: 'disaster-assessment',
      name: '11地灾评估',
      component: DisasterAssessmentForm
    },
  {
    id: 'illegal-land',
    name: '12违法用地',
    component: IllegalLandForm
  },
  {
      id: 'complaint-form',
      name: '13信访情况',
      component: ComplaintForm
    }
  ]

// 当前选中的组件ID
const selectedComponentId = ref<string>('land-basic-info')


</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 移动端汉堡菜单按钮 -->
    <button 
      class="fixed top-4 left-4 z-50 p-3 bg-white rounded-md shadow-lg md:hidden"
      @click="toggleMobileMenu"
      aria-label="切换菜单"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
      </svg>
    </button>
    
    <div class="flex">
      <!-- 左侧导航栏-->
      <div 
        class="w-80 max-w-[80vw] bg-white shadow-md p-4 h-screen fixed z-40 transform transition-transform duration-300 ease-in-out md:relative md:translate-x-0 md:h-screen md:sticky md:top-0 md:w-64 flex-shrink-0"
        :class="{ '-translate-x-full': !isMobileMenuOpen, 'translate-x-0': isMobileMenuOpen }"
      >
        <!-- 移动端关闭按钮 -->
        <button 
          class="absolute top-4 right-4 p-3 rounded-md hover:bg-gray-100 md:hidden"
          @click="closeMobileMenu"
          aria-label="关闭菜单"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        
        <!-- 全局用地类型选择 -->
        <div class="border-t pt-4">
          <h2 class="text-lg font-semibold text-gray-700 mb-3">用地类型</h2>

          <div class="inline-flex rounded-md shadow-sm" role="group">
            <button 
              type="button" 
              @click="landType = 'single'; closeMobileMenu()"
              class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 hover:bg-blue-600"
              :class="landType === 'single' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
            >
              单独选址
            </button>
            <button 
              type="button" 
              @click="landType = 'batch'; closeMobileMenu()"
              class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 hover:bg-blue-600"
              :class="landType === 'batch' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'"
            >
              批次用地
            </button>
          </div>
        </div>
        <!-- 功能模块选择 - 优化为可滚动列表 -->
        <div class="mb-6">
          <h2 class="text-lg font-semibold text-gray-700 mb-3">13个模块单元</h2>
          <div 
            class="flex flex-col gap-2 overflow-y-auto max-h-[calc(110vh-300px)] pr-1"
            style="scrollbar-width: thin; scrollbar-color: #cbd5e0 transparent;"
          >
            <div
              v-for="option in componentOptions"
              :key="option.id"
              class="relative"
            >
              <button
                @click="selectedComponentId = option.id; closeMobileMenu()"
                class="w-full px-4 py-2 rounded-lg transition-all duration-300 text-left text-sm md:text-base"
                :class="{
                  'bg-green-600 text-white shadow-md': selectedComponentId === option.id,
                  'bg-gray-100 text-gray-700 hover:bg-gray-200': selectedComponentId !== option.id
                }"
              >
                {{ option.name }}
              </button>
              <!-- 序号指示器 -->
              <div 
                class="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-1 rounded-full mt-0.5"
                :class="{
                  'bg-white': selectedComponentId === option.id,
                  'bg-transparent': selectedComponentId !== option.id
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧主内容区域 -->
      <div class="flex-1 min-h-screen transition-all duration-300 md:ml-0 flex justify-center" style="width: 100%;">
        <div class="w-full" style="max-width: 95vw; min-width: 320px;">
          <div class="w-full" style="max-width: 1200px; margin: 0 auto; padding: 1.5rem; padding-top: 4rem; padding-bottom: 4rem;">
            <component 
              :is="componentOptions.find(option => option.id === selectedComponentId)?.component"
              :landType="landType"
            />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单背景遮罩 -->
    <div 
      v-if="isMobileMenuOpen" 
      class="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden"
      @click="closeMobileMenu"
    ></div>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  overflow-x: hidden; /* 防止移动端菜单切换时出现水平滚动条 */
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

/* 覆盖全局#app样式，确保布局正确 */
#app {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* 移动端菜单过渡优化 */
@media (max-width: 767px) {
  .w-80 {
    width: 20rem;
  }
  
  .max-w-\[80vw\] {
    max-width: 80vw;
  }
}

/* 桌面端响应式优化 */
@media (min-width: 768px) {
  .md\:w-64 {
    width: 16rem;
  }
  
  .md\:h-screen {
    height: 100vh;
  }
}

/* 强制右侧内容区域固定宽度 */
.main-content-wrapper {
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 1.5rem !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
</style>
